<template>
  <div class="wrap">
    <div>
      <el-button type="success" @click="handleEdit('1')">安全员发起整改</el-button>
      <el-button type="success" @click="handleEdit('2')">安全部经理审批</el-button>
      <el-button type="success" @click="handleEdit('3')">市场部经理确认</el-button>
      <el-button type="success" @click="handleEdit('4')">市场部代商户填写</el-button>
      <el-button type="success" @click="handleEdit('5')">市场部安全员确认</el-button>
      <el-button type="success" @click="handleEdit('6')">安全部发起人确认</el-button>
      <el-button type="success" @click="handleEdit('7')">安全部经理最终确认</el-button>
    </div>
    <!-- <el-steps :active="active" finish-status="success">
      <el-step title="步骤 1">1</el-step>
      <el-step title="步骤 2">2</el-step>
      <el-step title="步骤 3">3</el-step>
    </el-steps>-->
    <div
      class="tit"
    >安全部发起整改流程：安全部安全员发起→安全部经理审批→市场部安全员（按片区）（抄送市场部经理）→通知商户整改→市场部代商户填写整改结果→市场部安全员确认（抄送市场部经理）→安全部发起人确认→安全部经理最终确认</div>
    <div class="img">
      <img
        src="https://files.axshare.com/gsc/ORNHZ6/c6/94/86/c694868284b84228873eafedd8340dbe/images/整改流程-安全部发起给商户/u2.png?pageId=58e18c22-389c-4e11-98d2-b76e50240ffe"
        alt
      />
    </div>
    <el-dialog
      title="违章整改确认"
      :visible.sync="open"
      width="1200px"
      :before-close="handleClose"
      v-if="open"
    >
      <el-form
        ref="formValidate"
        :model="formValidate"
        label-width="170px"
        class="formValidate mt20"
      >
        <el-form-item
          v-if="type!=1"
          label="发起部门"
          prop="homeName"
          :rules="{ required: true, message: '请输入', trigger: 'blur' }"
        >
          <el-input
            v-model="formValidate.homeName"
            :disabled="isCreate==2"
            placeholder="请输入"
            class="selWidth"
            clearable
          />
        </el-form-item>
        <el-form-item
          v-if="type!=1"
          label="发起人"
          prop="homeName"
          :rules="{ required: true, message: '请输入', trigger: 'blur' }"
        >
          <el-select
            :disabled="isCreate==2"
            v-model="formValidate.status"
            placeholder="请选择"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="dict in dict.type.sys_normal_disable"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="受检单位"
          prop="homeName"
          :rules="{ required: true, message: '请输入', trigger: 'blur' }"
        >
          <el-select
            :disabled="isCreate==2"
            v-model="formValidate.status"
            placeholder="请选择"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="dict in dict.type.sys_normal_disable"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="受检部门"
          prop="homeName"
          :rules="{ required: true, message: '请输入', trigger: 'blur' }"
        >
          <el-select
            :disabled="isCreate==2"
            v-model="formValidate.status"
            placeholder="请选择"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="dict in dict.type.sys_normal_disable"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="需要整改内容"
          prop="homeName"
          :rules="{ required: true, message: '请输入', trigger: 'blur' }"
        >
          <el-input
            type="textarea"
            v-model="formValidate.homeName"
            :disabled="isCreate==2"
            placeholder="请输入"
            class="selWidth"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="整改前图片"
          prop="homeName"
          :disabled="isCreate==2"
          :rules="{ required: true, message: '请输入', trigger: 'blur' }"
        >
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>
        </el-form-item>
        <el-form-item
          label="要求完成时间"
          prop="homeName"
          :rules="{ required: true, message: '请输入', trigger: 'blur' }"
        >
          <el-date-picker
            :disabled="isCreate==2"
            v-model="formValidate.dateRange"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
          ></el-date-picker>
        </el-form-item>

        <el-form-item
          label="检查人员"
          prop="homeName"
          :rules="{ required: true, message: '请输入', trigger: 'blur' }"
        >
          <el-input
            v-model="formValidate.homeName"
            :disabled="isCreate==2"
            placeholder="请输入"
            class="selWidth"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="检查时间"
          prop="homeName"
          :rules="{ required: true, message: '请输入', trigger: 'blur' }"
        >
          <el-date-picker
            :disabled="isCreate==2"
            v-model="formValidate.dateRange"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          v-if="type==2"
          label="审批意见"
          prop="homeName"
          :rules="{ required: true, message: '请输入', trigger: 'blur' }"
        >
          <el-input
            type="textarea"
            v-model="formValidate.homeName"
            placeholder="请输入"
            class="selWidth"
            clearable
          />
        </el-form-item>
        <el-form-item
          v-if="type>=4"
          label="安全部经理审核意见"
          prop="homeName"
          :rules="{ required: true, message: '请输入', trigger: 'blur' }"
        >
          <el-input
            :disabled="isCreate==2"
            type="textarea"
            v-model="formValidate.homeName"
            placeholder="请输入"
            class="selWidth"
            clearable
          />
        </el-form-item>
        <template v-if="type>=5">
          <el-form-item
            label="整改人"
            prop="homeName"
            :rules="{ required: true, message: '请输入', trigger: 'blur' }"
          >
            <el-input
              v-model="formValidate.homeName"
              :disabled="isCreate==2"
              placeholder="请输入"
              class="selWidth"
              clearable
            />
          </el-form-item>
          <el-form-item
            label="整改时间"
            prop="homeName"
            :rules="{ required: true, message: '请输入', trigger: 'blur' }"
          >
            <el-date-picker
              :disabled="isCreate==2"
              v-model="formValidate.dateRange"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            label="整改后图片"
            prop="homeName"
            :disabled="isCreate==2"
            :rules="{ required: true, message: '请输入', trigger: 'blur' }"
          >
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </el-form-item>
          <el-form-item
            label="整改意见"
            v-if="type==5"
            prop="homeName"
            :rules="{ required: true, message: '请输入', trigger: 'blur' }"
          >
            <el-input
              type="textarea"
              v-model="formValidate.homeName"
              placeholder="请输入"
              class="selWidth"
              clearable
            />
          </el-form-item>
          <el-form-item
            v-else
            label="安全员审批意见"
            prop="homeName"
            :rules="{ required: true, message: '请输入', trigger: 'blur' }"
          >
            <el-input
              :disabled="isCreate==2"
              type="textarea"
              v-model="formValidate.homeName"
              placeholder="请输入"
              class="selWidth"
              clearable
            />
          </el-form-item>
        </template>
        <template v-if="type==6||type==7">
          <el-form-item
            label="审批意见"
            prop="homeName"
            :rules="{ required: true, message: '请输入', trigger: 'blur' }"
          >
            <el-input
              type="textarea"
              v-model="formValidate.homeName"
              placeholder="请输入"
              class="selWidth"
              clearable
            />
          </el-form-item>
        </template>
        <div class="bt" style="text-align: center;" v-if="type==1">
          <el-button
            style="width:100px"
            type="primary"
            @click="submitForm('formValidate')"
            v-if="isCreate!=2"
          >提交</el-button>
          <el-button style="width:100px" @click="handleClose">取消</el-button>
        </div>
        <div class="bt" style="text-align: center;" v-if="type==2">
          <el-button style="width:100px" type="primary" @click="submitForm('formValidate')">通过</el-button>
          <el-button style="width:100px" @click="handleClose">退回</el-button>
        </div>
        <div class="bt" style="text-align: center;" v-if="type==3">
          <!-- <el-button style="width:100px" type="primary" @click="submitForm('formValidate')">通过</el-button> -->
          <el-button style="width:100px" @click="handleClose">退回</el-button>
        </div>
        <div class="bt" style="text-align: center;" v-if="type==4">
          <el-button type="primary" @click="submitForm('formValidate')">填写整改结果</el-button>
          <el-button style="width:100px" @click="handleClose">取消</el-button>
        </div>
        <div class="bt" style="text-align: center;" v-if="type==5||type==6||type==7">
          <el-button type="primary" @click="submitForm('formValidate')">确认整改完成</el-button>
          <el-button style="width:100px" @click="handleClose">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  dicts: ["sys_normal_disable"],
  data() {
    return {
      open: false,
      formValidate: {},
      isCreate: 0
    };
  },
  methods: {
    submitForm() {
      console.log(this.formValidate, "这是什么呀?");
      return;
      if (this.isCreate === 0) {
        //新增
        this.$refs.formValidate.validate(valid => {
          this.formValidate.medalId = this.formValidate.medalId.toString();
          console.log(this.formValidate, "this.formValidatethis.formValidate");
          if (valid) {
            homeGetAdd(this.formValidate).then(res => {
              this.$message.success("提交成功");
              this.$emit("getList");
              this.$emit("close");
            });
          }
        });
      }

      if (this.isCreate === 1) {
        //编辑
        this.formValidate.medalId = this.formValidate.medalId.toString();
        console.log(this.formValidate, "2this.formValidatethis.formValidate");
        this.$refs.formValidate.validate(valid => {
          if (valid) {
            homeGetEdit(this.formValidate).then(res => {
              this.$message.success("提交成功");
              this.$emit("getList");
              this.$emit("close");
            });
          }
        });
      }
    },
    handleEdit(type) {
      if (type == 1) {
        this.isCreate = 0;
      } else {
        this.isCreate = 2;
      }
      this.type = type;
      this.open = true;
    },
    handleClose() {
      if (this.type == 1) {
        this.open = false;
      } else {
        console.log("做个啥事在关闭");
        this.open = false;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.wrap {
  width: 80%;
  margin: 0 auto;

  .tit {
    width: 20%;
    margin: 30px auto;
  }
  .img {
    text-align: center;
  }
}
</style>